<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="headBox">
			<text class="title">{{content.title}}</text>
			<text class="time">发布时间 ：{{content.create_time}}</text>
			<image :src="baseurl+'association/share.png'" class="share"></image>
		</view>
		<mp-html :content="content.content" class="info"></mp-html>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: ' ',
					bgColor: 'transparent',
					color: '#000000',
				},
				id:'',
				content:''
			}
		},
		onLoad(options) {
			// 帖子详情
			this.id = options.id;
			this.$request.get(`article/detail?id=${this.id}`).then(res => {
				this.content = res.data.data;
			})
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.info {
		display: block;
		    width: 710rpx;
		    margin-left: 20rpx;
		    margin-top: 20rpx;
	}
	.bottomBox {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		border-top: 1rpx solid #919191;

		.bottomMenuBox {
			margin-left: 40rpx;
			margin-top: 15rpx;
			display: flex;
			align-items: center;

			.vote1 {
				width: 27rpx;
				height: 28rpx;
				margin-left: 38rpx;
			}

			.msg1 {
				width: 32rpx;
				height: 30rpx;
				margin-left: 38rpx;
			}

			.follow {
				width: 32rpx;
				height: 30rpx;
				margin-left: 38rpx;
			}

			.label {
				margin-left: 15rpx;
				font-size: 22rpx;
				font-weight: 500;
			}

			.input {
				width: 307rpx;
				height: 70rpx;
				background-color: #F6F6F6;
				border-radius: 35rpx;
				text-align: center;
			}
		}
	}

	.commentBox {
		margin-top: 95rpx;
		margin-left: 40rpx;

		.commentItem {
			display: flex;
			flex-direction: column;

			.commentChildren {
				margin-left: 90rpx;
			}

			.expandBox {
				margin-left: 90rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #919191;
				display: flex;
				margin-top: 27rpx;
				align-items: center;

				.arrowDown,
				.arrowUp {
					width: 20rpx;
					height: 12rpx;
					margin-left: 15rpx;
				}
			}

			.timeBox {
				margin-left: 90rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #919191;
				display: flex;
				margin-top: 27rpx;

				.replyBtn {
					margin-left: 33rpx;
				}
			}

			.comment1 {
				width: 490rpx;
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 90rpx;
			}

			.comment {
				width: 580rpx;
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 90rpx;
			}
		}

		.total {
			font-size: 24rpx;
			font-weight: 500;
			color: #919191;
		}
	}

	.viewBox {
		margin-top: 70rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.msg {
			width: 24rpx;
			height: 22rpx;
			margin-left: 45rpx;
		}

		.vote {
			width: 22rpx;
			height: 20rpx;
			margin-left: 45rpx;
		}

		.eye {
			width: 20rpx;
			height: 14rpx;
		}

		.viewNum {
			font-size: 20rpx;
			font-weight: 500;
			margin-left: 18rpx;
		}
	}

	.infoBox {
		margin-top: 35rpx;
		margin-left: 40rpx;
		width: 670rpx;
	}

	.userBox {
		margin-top: 35rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.badge {
			width: 40rpx;
			height: 32rpx;
			margin-left: 23rpx;
		}

		.name {
			font-size: 24rpx;
			font-weight: 700;
			margin-left: 32rpx;
		}

		.avatar {
			width: 65rpx;
			height: 65rpx;
			border-radius: 50%;
		}
	}

	.headBox {
		position: relative;
		width: 750rpx;
		height: 366rpx;
		background: url('https://miantou.guguan.net/img/association/postInfoHead.png');
		background-size: 100% 100%;

		.share {
			position: absolute;
			width: 127rpx;
			height: 56rpx;
			bottom: 33rpx;
			right: 36rpx;
		}

		.time {
			position: absolute;
			font-size: 22rpx;
			font-weight: 500;
			color: #fff;
			top: 295rpx;
			left: 40rpx;
		}

		.title {
			position: absolute;
			font-size: 36rpx;
			font-weight: 700;
			color: #fff;
			top: 180rpx;
			left: 40rpx;
		}
	}

	/deep/ .pyh-nv-box {
		position: fixed !important;
		top: 0;
		z-index:999;
	}

	.content {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}
</style>